<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>primary</view>
				<view>步进器颜色主题</view>
			</view>
			<view class="tr">
				<view>color</view>
				<view>String</view>
				<view>无</view>
				<view>步进器按钮自定义颜色</view>
			</view>
			<view class="tr">
				<view>textColor</view>
				<view>String</view>
				<view>无</view>
				<view>加减按钮固定文字色</view>
			</view>
			<view class="tr">
				<view>radius</view>
				<view>String, Number</view>
				<view>circle</view>
				<view>按钮圆角，可选值square、circle，以及数值带单位</view>
			</view>
			<view class="tr">
				<view>size</view>
				<view>String</view>
				<view>无</view>
				<view>步进器预定尺寸</view>
			</view>
			<view class="tr">
				<view>plain</view>
				<view>Boolean</view>
				<view>false</view>
				<view>按钮镂空</view>
			</view>
			<view class="tr">
				<view>value</view>
				<view>Number</view>
				<view>0</view>
				<view>步进器默认值</view>
			</view>
			<view class="tr">
				<view>integrated</view>
				<view>Boolean</view>
				<view>false</view>
				<view>一体式按钮</view>
			</view>
			<view class="tr">
				<view>borderMode</view>
				<view>Boolean</view>
				<view>false</view>
				<view>边框模式，integrated一体式按钮开启时有效</view>
			</view>
			<view class="tr">
				<view>boxWidth</view>
				<view>Number</view>
				<view>0</view>
				<view>输入框宽度，固定单位英文字符。小于等于0表示使用内部自动计算</view>
			</view>
			<view class="tr">
				<view>boxBgColor</view>
				<view>String</view>
				<view>无</view>
				<view>步进器输入框自定义颜色</view>
			</view>
			<view class="tr">
				<view>boxSpace</view>
				<view>Number</view>
				<view>1</view>
				<view>输入框水平预留间距，固定单位英文字符</view>
			</view>
			<view class="tr">
				<view>zeroShow</view>
				<view>Boolean</view>
				<view>true</view>
				<view>初始零值显示，初始化值是0的情况是否显示内容</view>
			</view>
			<view class="tr">
				<view>min</view>
				<view>Number</view>
				<view>0</view>
				<view>允许的最小值，可设为负数</view>
			</view>
			<view class="tr">
				<view>max</view>
				<view>Number</view>
				<view>999</view>
				<view>允许的最大值</view>
			</view>
			<view class="tr">
				<view>step</view>
				<view>Number</view>
				<view>1</view>
				<view>步进，可为小数</view>
			</view>
			<view class="tr">
				<view>decimals</view>
				<view>Number</view>
				<view>0</view>
				<view>允许数值的小数位数，数值小数位超过此长度时四舍五入</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>fixDecimals</view>
					<view>Number</view>
					<view>0</view>
					<view>固定显示的小数位数，小数长度不足时补0。允许小数位与固定小数位的关系：</view>
				</view>
				<view class="appendix">
					<view>
						允许小数位决定数值小数位数的上限；固定小数位决定显示小数位数的下限。
					</view>
					<view>
						允许小数位数大于固定小数位数时，显示数值的小数位数不小于固定小数位数，可大于固定小数位数但小于允许小数位数
					</view>
					<view>
						允许小数位数小于固定小数位数时，显示数值的小数位数等于固定小数位数，小于固定小数位数的部分补零
					</view>
				</view>
			</view>
			<view class="tr">
				<view>unit</view>
				<view>String</view>
				<view>无</view>
				<view>内置单位文字</view>
			</view>
			<view class="tr">
				<view>maxlength</view>
				<view>Number</view>
				<view>0</view>
				<view>输入框最大输入长度，小于等于0表示使用内部自动计算</view>
			</view>
			<view class="tr">
				<view>btnClass</view>
				<view>String</view>
				<view>""</view>
				<view>按钮样式名，全局样式或穿透样式有效</view>
			</view>
			<view class="tr">
				<view>boxClass</view>
				<view>String</view>
				<view>""</view>
				<view>输入框样式名，全局样式或穿透样式有效</view>
			</view>
			<view class="tr">
				<view>useLongPress</view>
				<view>Boolean</view>
				<view>false</view>
				<view>使用长按自增</view>
			</view>
			<view class="tr">
				<view>useInput</view>
				<view>Boolean</view>
				<view>true</view>
				<view>使用输入框</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>icon</view>
					<view>Object</view>
					<view></view>
					<view>iconfont图标数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"图标名"}
					<view>reduce：icon-reduce 减号</view>
					<view>add：icon-add 加号</view>
				</view>
			</view>
			<view class="tr">
				<view>disabled</view>
				<view>Boolean</view>
				<view>false</view>
				<view>禁用</view>
			</view>
			<view class="tr">
				<view>readOnly</view>
				<view>Boolean</view>
				<view>false</view>
				<view>只读</view>
			</view>
			<view class="tr">
				<view>@change</view>
				<view>事件</view>
				<view>	</view>
				<view>值改变事件，提交当前值</view>
			</view>
			<view class="tr">
				<view>@input</view>
				<view>事件</view>
				<view>	</view>
				<view>值改变事件，用于model</view>
			</view>
		</view>
		
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{'&lt;vi-stepper :value="初始数值">&lt;/vi-stepper>'}}
			</view>
			<view class="py-sm">
				<vi-stepper :value="0" class="mr-e1"></vi-stepper>默认第一主题色
			</view>
			<view class="py-sm">
				<vi-stepper :value="1" type="second" class="mr-e1"></vi-stepper>第二主题色 type=second
			</view>
			<view class="py-sm">
				<vi-stepper :value="2" type="third" class="mr-e1"></vi-stepper>第三主题色 type=third
			</view>
			<view class="py-sm">
				<vi-stepper :value="3" type="fourth" class="mr-e1"></vi-stepper>第四主题色 type=fourth
			</view>
			<view class="py-sm">
				<vi-stepper :value="4" type="fifth" class="mr-e1"></vi-stepper>第五主题色 type=fifth
			</view>
			<view class="py-sm">
				<vi-stepper :value="1" :max="3" color="#FFC0CB" class="mr-e1"></vi-stepper>自定义颜色 color=#FFC0CB
			</view>
			<view class="py-sm">
				<vi-stepper :value="6" boxBgColor="#eee" class="mr-e1"></vi-stepper>自定义输入框颜色 boxBgColor=#eee
			</view>
			<view class="py-sm">
				<view class="mb-sm">
					尺寸，响应式关闭时有效果。默认1.2em
				</view>
				<view class="mb-sm">
					<vi-stepper size="sm" class="mr-e1" :max="5"></vi-stepper>小尺寸　size=sm
				</view>
				<view class="mb-sm">
					<vi-stepper size="md" class="mr-e1" :max="5" :value="1"></vi-stepper>中尺寸　size=md
				</view>
				<view class="mb-sm">
					<vi-stepper size="lg" class="mr-e1" :max="5" :value="5"></vi-stepper>大尺寸　size=lg
				</view>
			</view>
			<view class="py-sm">
				<view class="mb-sm">
					样式组合，圆角、镂空、一体化、边框
				</view>
				<view class="mb-sm">
					<vi-stepper class="mr-e1" radius="square" :min="-2" :value="-1" :max="0"></vi-stepper>radius=square
				</view>
				<view class="mb-sm">
					<vi-stepper class="mr-e1" plain :min="-2" :value="-1" :max="0"></vi-stepper>plain=true
				</view>
				<view class="mb-sm">
					<vi-stepper class="mr-e1" integrated boxBgColor="#f2f2f2" :min="-2" :value="-1" :max="0"></vi-stepper>integrated　boxBgColor=#f2f2f2
				</view>
				<view class="mb-sm">
					<vi-stepper class="mr-e1" integrated borderMode :min="-2" :value="-1" :max="0"></vi-stepper>integrated　borderMode
				</view>
				<view class="mb-sm">
					<vi-stepper class="mr-e1" integrated borderMode radius="square" :min="-2" :value="-1" :max="0"></vi-stepper>
				</view>
				<view class="mb-sm">
					<vi-stepper class="mr-e1" integrated borderMode radius="square" color="#FFC0CB" :min="-2" :value="-1" :max="0"></vi-stepper>自定色#FFC0CB
				</view>
				<view class="mb-sm">
					<vi-stepper class="mr-e1" integrated borderMode plain :min="-2" :value="-1" :max="0"></vi-stepper>integrated　borderMode　plain
				</view>
				<view class="mb-sm">
					<vi-stepper class="mr-e1" integrated borderMode plain radius="square" :min="-2" :value="-1" :max="0"></vi-stepper>
				</view>
				<view class="mb-sm">
					<vi-stepper class="mr-e1" integrated borderMode plain radius="square" color="#FFC0CB" :min="-2" :value="-1" :max="0"></vi-stepper>自定色#FFC0CB
				</view>
			</view>
			<view class="py-sm">
				<view class="mb-sm">
					禁用
				</view>
				<view class="mb-sm">
					<vi-stepper class="mr-e1" radius="square" disabled :value="1"></vi-stepper>disabled
				</view>
				<view class="mb-sm">
					<vi-stepper class="mr-e1" plain disabled :value="1"></vi-stepper>
				</view>
				<view class="mb-sm">
					<vi-stepper class="mr-e1" integrated borderMode disabled :value="-1"></vi-stepper>
				</view>
				<view class="mb-sm">
					<vi-stepper class="mr-e1" integrated borderMode plain radius="square" disabled  :value="-1"></vi-stepper>
				</view>
				<view class="mb-sm">
					<vi-stepper class="mr-e1" radius="square" readOnly :value="1"></vi-stepper>只读 readOnly
				</view>
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
